<template>
	<view class="container">
		<!-- 商家头部信息 -->
		<view class="merchant-header">
			<view class="merchant-logo">
				<image
					src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80"
					mode="aspectFill" @error="handleImageError" />
			</view>
			<view class="merchant-info">
				<view class="merchant-name">名创优品 (万达广场店)</view>
				<view class="merchant-rating">
					<uni-rate :value="4.9" :size="14" color="#ff9500" readonly />
					<text class="rating-text">4.9</text>
					<text class="sales-text">已售 2000+</text>
				</view>
				<view class="merchant-meta">营业时间: 10:00-22:00</view>
			</view>
		</view>

		<!-- 商家操作栏 -->
		<view class="merchant-action">
			<view class="action-button" @click="makePhoneCall">
				<uni-icons type="phone" size="20" color="#666" />
				<text>电话</text>
			</view>
			<view class="action-button" @click="openLocation">
				<uni-icons type="location" size="20" color="#666" />
				<text>导航</text>
			</view>
			<view class="action-button" @click="contactCustomerService">
				<uni-icons type="chat" size="20" color="#666" />
				<text>客服</text>
			</view>
			<view class="action-button" @click="toggleFavorite">
				<uni-icons :type="isFavorite ? 'heart-filled' : 'heart'" size="20"
					:color="isFavorite ? '#ff2d4b' : '#666'" />
				<text>收藏</text>
			</view>
			<view class="action-button" @click="showModal('merchant-info-modal')">
				<uni-icons type="info" size="20" color="#666" />
				<text>详情</text>
			</view>
		</view>

		<!-- 商家信息弹窗 -->
		<uni-popup ref="merchantInfoModal" type="bottom" :is-mask-click="true">
			<view class="modal-content">
				<view class="modal-close" @click="hideModal('merchant-info-modal')">
					<uni-icons type="close" size="20" color="#999" />
				</view>
				<view class="modal-title">商家详情</view>
				<view class="section-title">商家简介</view>
				<view class="merchant-description">
					名创优品是全球知名的生活精品零售品牌，以「好品质、低价格、高颜值」的产品理念，为消费者提供丰富多样的生活用品。本店位于万达广场一层，交通便利，环境舒适，欢迎您的光临！
				</view>
				<view class="section-title">商家信息</view>
				<view class="merchant-info-list">
					<view class="info-item">
						<view class="info-label">地址</view>
						<view class="info-value">万达广场一层1088号</view>
					</view>
					<view class="info-item">
						<view class="info-label">电话</view>
						<view class="info-value">400-888-8888</view>
					</view>
					<view class="info-item">
						<view class="info-label">营业时间</view>
						<view class="info-value">10:00-22:00</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 商品分类 -->
		<scroll-view scroll-x>
			<view class="category-tabs">
				<view class="category-tab" :class="{active: activeCategory === 'all'}" @click="switchCategory('all')">全部
				</view>
				<view class="category-tab" :class="{active: activeCategory === 'home'}" @click="switchCategory('home')">
					家居用品
				</view>
				<view class="category-tab" :class="{active: activeCategory === 'storage'}"
					@click="switchCategory('storage')">收纳整理</view>
				<view class="category-tab" :class="{active: activeCategory === 'textile'}"
					@click="switchCategory('textile')">纺织用品</view>
			</view>
		</scroll-view>

		<!-- 商品列表 -->
		<view class="product-list" v-show="activeCategory === 'all'">
			<view class="product-item" v-for="(item, index) in allProducts" :key="index">
				<view class="product-image">
					<image :src="item.image" mode="aspectFill" @error="handleImageError" />
				</view>
				<view class="product-name">{{ item.name }}</view>
				<view class="product-price">¥{{ item.price }}</view>
			</view>
		</view>

		<view class="product-list" v-show="activeCategory === 'home'">
			<view class="product-item" v-for="(item, index) in homeProducts" :key="index">
				<view class="product-image">
					<image :src="item.image" mode="aspectFill" @error="handleImageError" />
				</view>
				<view class="product-name">{{ item.name }}</view>
				<view class="product-price">¥{{ item.price }}</view>
			</view>
		</view>

		<view class="product-list" v-show="activeCategory === 'storage'">
			<view class="product-item" v-for="(item, index) in storageProducts" :key="index">
				<view class="product-image">
					<image :src="item.image" mode="aspectFill" @error="handleImageError" />
				</view>
				<view class="product-name">{{ item.name }}</view>
				<view class="product-price">¥{{ item.price }}</view>
			</view>
		</view>

		<view class="product-list" v-show="activeCategory === 'textile'">
			<view class="product-item" v-for="(item, index) in textileProducts" :key="index">
				<view class="product-image">
					<image :src="item.image" mode="aspectFill" @error="handleImageError" />
				</view>
				<view class="product-name">{{ item.name }}</view>
				<view class="product-price">¥{{ item.price }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const merchantInfoModal = ref(null);
	const isFavorite = ref(false);
	const activeCategory = ref('all');

	const allProducts = ref([{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '北欧风简约陶瓷杯',
			price: '29.9'
		},
		{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '多功能便携收纳包',
			price: '39.9'
		},
		{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '纯棉舒适抱枕',
			price: '59.9'
		},
		{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '创意桌面收纳盒',
			price: '49.9'
		}
	]);

	const homeProducts = ref([{
		image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
		name: '北欧风简约陶瓷杯',
		price: '29.9'
	}]);

	const storageProducts = ref([{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '多功能便携收纳包',
			price: '39.9'
		},
		{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
			name: '创意桌面收纳盒',
			price: '49.9'
		}
	]);

	const textileProducts = ref([{
		image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5',
		name: '纯棉舒适抱枕',
		price: '59.9'
	}]);

	const showModal = (modalId) => {
		if (modalId === 'merchant-info-modal') {
			merchantInfoModal.value.open();
		}
	};

	const hideModal = (modalId) => {
		if (modalId === 'merchant-info-modal') {
			merchantInfoModal.value.close();
		}
	};

	const switchCategory = (categoryId) => {
		activeCategory.value = categoryId;
	};

	const toggleFavorite = () => {
		isFavorite.value = !isFavorite.value;
	};

	const makePhoneCall = () => {
		uni.makePhoneCall({
			phoneNumber: '4008888888'
		});
	};

	const openLocation = () => {
		uni.openLocation({
			latitude: 39.90403,
			longitude: 116.407525,
			name: '名创优品(万达广场店)',
			address: '万达广场一层1088号'
		});
	};

	const contactCustomerService = () => {
		uni.navigateTo({
			url: '/pages/customer-service'
		});
	};

	const handleImageError = (e) => {
		e.target.src = '/static/images/placeholder.png';
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 50px;
	}

	.merchant-header {
		background-color: #fff;
		padding: 15px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.merchant-logo {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		background-color: #f0f0f0;
		margin-right: 15px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.merchant-info {
		flex: 1;
	}

	.merchant-name {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 5px;
	}

	.merchant-rating {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;

		.rating-text {
			margin-left: 5px;
		}

		.sales-text {
			margin-left: 10px;
		}
	}

	.merchant-meta {
		font-size: 13px;
		color: #999;
	}

	.merchant-action {
		display: flex;
		background-color: #fff;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}

	.action-button {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 13px;
		color: #666;

		text {
			margin-top: 5px;
		}
	}

	.modal-content {
		position: relative;
		background-color: #fff;
		border-radius: 16px 16px 0 0;
		padding: 20px;
		max-height: 80vh;
	}

	.modal-close {
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 15px;
		padding-right: 30px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		padding: 15px 15px 10px;
		background-color: #fff;
		margin-top: 10px;
		border-bottom: 1px solid #eee;
	}

	.merchant-description {
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
		line-height: 1.5;
		color: #666;
	}

	.merchant-info-list {
		background-color: #fff;
		padding: 0 15px;
	}

	.info-item {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-label {
		width: 80px;
		color: #999;
		font-size: 14px;
	}

	.info-value {
		flex: 1;
		font-size: 14px;
		color: #333;
	}

	.category-tabs {
		display: flex;
		background-color: #fff;
		padding: 12px 15px;
		margin-top: 10px;
		border-bottom: 1px solid #eee;
		white-space: nowrap;
	}

	.category-tab {
		padding: 6px 15px;
		margin-right: 10px;
		border-radius: 16px;
		font-size: 14px;
		color: #666;
		background-color: #f5f5f5;

		&.active {
			color: #fff;
			background-color: #ff2d4b;
		}
	}

	.product-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		padding: 12px;
		background-color: #f8f8f8;
	}

	.product-item {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.product-image {
		width: 100%;
		height: 150px;
		background-color: #f5f5f5;
		border-radius: 8px 0;
		margin-bottom: 8px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.product-name {
		padding: 0 6px;
		font-size: 14px;
		margin-bottom: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price {
		padding: 6px;
		font-size: 15px;
		font-weight: 600;
		color: #ff2d4b;
	}
</style>